<template>
  <v-bottom-navigation
          :value="value"
          :fixed="true"
          :grow="true"

          :v-model="value">

    <v-btn value="home" color="white" height="56" @click="redirect('/home')">
      <span>首页</span>
      <v-icon>mdi-home</v-icon>
    </v-btn>

    <v-btn value="wordbook" color="white" height="56" @click="redirect('/wordbook')">
      <span>单词本</span>
      <v-icon>mdi-book-open</v-icon>
    </v-btn>

    <v-btn value="word" color="white" height="56" @click="redirect('/word')">
      <span>单词</span>
      <v-icon>mdi-file-word-box</v-icon>
    </v-btn>

    <v-btn value="me" color="white" height="56" @click="redirect('/me')">
      <span>我的</span>
      <v-icon>mdi-account</v-icon>
    </v-btn>

  </v-bottom-navigation>
</template>

<script>
  export default {
    name: "BottomNavigation",
    data: () => ({ value: 'home' }),
    methods: {
      redirect(path){
        this.$router.replace(path);
      }
    }
  }
</script>

<style scoped>

</style>